<template>
    <div class="role">
      登录日志
      
      <span class="dataDemonstration">请选择时间段:</span>
      <el-date-picker
        v-model="dataValue"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="startDate"
        end-placeholder="endDate"
        :default-time="dataValue"
        :shortcuts="shortcuts"
      />

    <el-button type="primary" class="search-date-box-button" @click="handleSearch(this.dataValue)">搜索</el-button>
      <!-- 自定义表格 -->
      <systemForm
        :data-source="searchResult"
        :columns="columns"
        :pagination="pagination"
      >
        <!-- 自定义各复杂渲染列的插槽布局 -->
        <template #IfSuccess="{ row }">
          <el-switch :modelValue="row.IfSuccess" />
        </template>
      </systemForm>
      </div>
  </template>
  
  <script>
import systemForm from '../system/components/systemForm.vue'
  export default {
    data() {
      return {
        // 模拟所有角色信息的数据
        searchResult:[],
        columnSearch: Array(10).fill(null).map((_, index) => ({
            loginId: index + 1,
            UserId: '角色名称' + (index + 1),
            LoginTime:new Date().toISOString().split('T')[0],
            LoginOutTime:new Date().toISOString().split('T')[0],
            LoginUserIp:'197.168.1.'+index,
            LoginDesc: '描述' + (index + 1),
            IfSuccess: Math.random() > 0.2,
        })),
        // 表格中列的定义数据
        columns: [
          {
            type: 'selection',
            width: '80px'
          },
          {
            label: '序号',
            prop: 'LoginId',
            width: '80px'
          },
          {
            label: '登录用户',
            prop: 'UserId',
            width: '180px'
          },
          {
            label: '登录时间',
            prop: 'LoginTime',
            width: '240px',
          },
          {
            label: '退出时间',
            prop: 'LoginOutTime',
            width: '240px',
          },
          {
            label: 'ip地址',
            prop: 'LoginUserIp',
            width: '240px',
          },
          {
            label: '是否成功',
            prop: 'IfSuccess',
            slot:true
          },
          {
            label: '登录备注',
            prop: 'LoginDesc',
          },
        ],
        // 分页器配置
        // pagination: false,
        pagination: {
          total: 50,
          layout: 'total, ->, prev, pager, next, jumper',
          onCurrentChange:this.pageChange,
        },
        // 日期搜索框显示数据
        dataValue:[],
        //快速选择数据
        shortcuts: [
          {
            text:'本日',
            value:()=>{
              const today = new Date();
              const start = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // 获取当天零点的时间
              const end = new Date();
              return [start, end];

            }
          },
          {
            text: '本周',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            },
          },
          {
            text: '本月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          
        ]
        
        
  }},
    components: {
      systemForm,
    },
    //从新挂载时刷新
    created(){
      //初始化默认显示日期数据
      const startDateTime=new Date()
      const endDateTime=new Date()
      this.dataValue=[startDateTime.toISOString(),endDateTime.toISOString()]
    },
    mounted(){
      //初始化搜索结果数据
      if(this.$store.getters['search/loginLogSearchResult']){
        this.searchResult=this.$store.getters['search/loginLogSearchResult']
      }
      //初始化搜索日期数据
      if(this.$store.getters['searchDate/loginLogSearchDate']){
        this.dataValue=this.$store.getters['searchDate/loginLogSearchDate']
        console.log('this.dataValue',this.dataValue)
      }
      

    },
    methods: {
      //点击搜索触发事件
        handleSearch(event) {

              const dataValue=event

              //将传入的参数拆分成开始时间和结束时间
              const startDate = new Date(dataValue[0])
              const endDate = new Date(dataValue[1])

              // 如果输入的日期无效，则返回空数组
              if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
                this.searchResult=[]
              }

              //将搜索框时间段按日期转成数组dates
              const daysBetween = (endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000)
              const dates = []
              for (let i = 0; i <= daysBetween; i++) {
                const date = new Date(startDate.getTime() + i * 24 * 60 * 60 * 1000)
                dates.push(`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate()}`)
              }

              //实现时间段内的数据搜索

              this.searchResult=this.columnSearch.filter((item)=>{
                    return dates.includes(item.LoginTime)
              })

              //将搜索结果存储到store，用于回显
              this.$store.dispatch('search/saveLoginLogSearchResult',this.searchResult)
             //将搜索时间存储到store，用于回显
              this.$store.dispatch('searchDate/saveLoginLogSearchDate',dataValue)
            return
         }
      },
     
    }

  </script>
  
